<div class="container-fluid">
    <form id="form">
        <div id="pad-wrapper" class="form-page">
            <div class="row-fluid form-wrapper">
                <div class="span8 column">
                    <input type="hidden" th:value="${info.id}" name="id">
                    <div class="field-box">
                        <label>项目名称:</label>
                        <input class="span8 inline-input" type="text" th:value="${info.title}" readonly="readonly" name="title"/>
                    </div>
                    <div class="field-box">
                        <label>学部:</label>
                        <input class="span8 inline-input" type="text" th:value="${info.dep}" readonly="readonly" name="dep"/>
                    </div>
                    <div class="field-box">
                        <label>开始日期:</label>
                        <input type="text" th:value="${#calendars.format(info.sdate,'yyyy-MM-dd HH:mm:ss')}"
                               class="input-large datetime-picker" name="sdate"/>
                    </div>
                    <div class="field-box">
                        <label>结束日期:</label>
                        <input type="text" th:value="${#calendars.format(info.edate,'yyyy-MM-dd HH:mm:ss')}"
                               class="input-large datetime-picker" name="edate"/>
                    </div>
                    <div class="field-box">
                        <label>启用状态:</label>
                        <input type="hidden" th:value="${info.state}" name="state" id="state">
                        <div class="btn-group">
                            <button type="button" th:class="${info.state eq 1}? 'active glow left' : 'glow left'"
                                    value="1"
                                    onclick="changeState(this)">开启
                            </button>
                            <button type="button" th:class="${info.state eq 0}? 'active glow right':'glow right'"
                                    value="0" onclick="changeState(this)">
                                不启用
                            </button>
                        </div>
                    </div>
                </div>

                <div class="span4 column pull-right">
                    <div class="field-box">
                        <label>添加扩展字段:</label>
                        <input class="span8 inline-input" placeholder="填写字段名称" id="extInput"/>
                        <a class="btn-glow primary" onclick="addExtItem(this)">添加</a>
                    </div>
                    <div id="add-item"></div>
                </div>
            </div>
            <div class="center">
                <a class="btn-glow" onclick="goback(this)">返 回</a>
                <a class="btn-glow primary" onclick="submit(this)">提 交</a>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
       $('.datetime-picker').datetimepicker({
             language: 'zh-CN',
             autoclose: true,
             format:'yyyy-mm-dd hh:ii:ss',
             todayBtn:true
        }
        ).next().on(ace.click_event, function () {
          $(this).prev().focus();
       });

    function changeState(clickObj){
        $('.glow').removeClass('active');
        $(clickObj).addClass('active');
        $('#state').val(clickObj.value);
        return false;
    }

    var addCount = 1;
    function addExtItem(clickObj){
       var parVal = $('#extInput').val();
       if(parVal == ''){
          return false;
       }
      var item = '<div class="field-box"> <label>扩展字段</label><input class="span8 inline-input ext" type="text" name=extFiles['+ addCount +'] value="'+ parVal+'" readonly="readonly"/><i class="red icon-minus ext-minus" style="cursor: pointer" onclick="delExtItem(this)"></i></div>';
      $('#add-item').append(item);
      addCount++;
    }

    function delExtItem(obj){
       var parent = $(obj).parent();
       parent.remove();
    };

   function submit(){
     $("#form").ajaxSubmit({
            type: 'post',
            url: "busi/update" ,
            success: function(data){
                 layer.msg("修改成功", {icon: 1});
            },
            error: function(XmlHttpRequest, textStatus, errorThrown){
               layer.msg('修改失败', {icon: 5});
            }
        });
   }

   function goback(){
      $('#main-content').load('/busi/list')
   }

</script>